<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/jsp/common/head.jsp" %>

<style>
    .xw{
        padding-top: 40px;
    }
    .sy{
        background-image: url("${pageContext.request.contextPath}/img/banner.png");
        height: 100%;
        background-attachment:fixed;

    }
    .center-block{
        display: block;
        padding-top:20%;
    }
</style>
<div class="sy jumbotron">
    <div class="center-block">
        <h1 class="text-center ">欢迎来到喵屋</h1>
        <h4 class="text-center">即刻起为你的宠物营造一个温暖的环境吧</h4>
        <h1></h1>
        <p class="text-center"><a class="btn btn-primary btn-lg"
                                  href="${pageContext.request.contextPath}/page?position=user" role="button">加入我们</a></p>
    </div>
</div>
<div class="container">
    <div class="row mh-content">
        <div class="media">
            <div class="kj1">
                <h1 class="media-heading text-center">你知道吗？</h1>
                <h1 class="media-heading text-center">↓</h1>
                <div class="xw">
                    <div class="media-body ">
                        <h2 class="media-heading">猫咪的智力</h2>
                        通常情况下，猫咪的智力相当于人类1-3岁婴儿的智力；
                    </div>
                    <div class="media-left">
                        <a href="#">
                            <img width="200px" height="200px" class="img-rounded"
                                 src="${pageContext.request.contextPath}/img/banner.png" alt="...">
                        </a>
                    </div>
                </div>
                <hr/>
                <div class="xw">
                    <div class="media-body">
                        <h2 class="media-heading">猫咪的表达</h2>
                        猫咪舔主人的手和脸，就是给主人梳毛，也是表达爱意的方式。
                    </div>
                    <div class="media-left">
                        <a href="#">
                            <img width="200px" height="200px" class="img-rounded"
                                 src="${pageContext.request.contextPath}/img/banner.png" alt="...">
                        </a>
                    </div>
                </div>
                <hr/>
                <div class="xw">
                    <div class="media-body">
                        <h2 class="media-heading">猫咪的一生</h2>
                        猫咪的寿命一般在15-20年，年龄跟品种、体型、饲养方式、护理方式有关。
                    </div>
                    <div class="media-left">
                        <a href="#">
                            <img width="200px" height="200px" class="img-rounded"
                                 src="${pageContext.request.contextPath}/img/banner.png" alt="...">
                        </a>
                    </div>
                </div>
                <hr/>
            </div>

            <div class=" media">
                <h1 class="media-heading text-center">推荐好物</h1>
                <h1 class="media-heading text-center">↓</h1>
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <img src="${pageContext.request.contextPath}/img/banner.png" alt="...">
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>...</p>
                                <p class="text-right"><a href="#" class="btn btn-primary" role="button">BUY</a></p>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>

<%@include file="/jsp/common/foot.jsp" %>
